<template>
  <div id="app">
    <login-page 
      v-if="currentView === 'login'" 
      @login="login">
    </login-page>
    <div v-else class="main-layout">
      <!-- 侧边栏 -->
      <sidebar 
        @menu-select="handleMenuSelect"
      />
      
      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 新的顶部导航栏 -->
        <header class="top-navigation">
          <div class="nav-brand">
            <h1>电信管理系统</h1>
          </div>
          <div class="nav-menu">
            <div class="user-actions">
              <span class="welcome-text">欢迎, {{ user.username }}!</span>
              <button @click="logout" class="logout-button">退出登录</button>
            </div>
          </div>
        </header>
        
        <!-- 页面内容 -->
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 登录页面组件
import LoginPage from './modules/auth/LoginPage.vue'
// 侧边栏组件
import Sidebar from './components/Sidebar.vue'

export default {
  name: 'App',
  components: {
    LoginPage,
    Sidebar
  },
  setup() {
    const currentView = ref('login') // 默认显示登录页面
    const user = ref(null)
    const router = useRouter()

    const login = (username, password) => {
      // 简单的登录验证
      if (username && password) {
        user.value = { username }
        currentView.value = 'staff'
        // 默认跳转到员工页面
        router.push('/staff')
      }
    }

    const logout = () => {
      user.value = null
      currentView.value = 'login'
    }

    // 处理菜单选择
    const handleMenuSelect = ({ moduleId, subModuleId }) => {
      // 根据菜单选择跳转到对应路由
      if (moduleId === 'customer') {
        if (!subModuleId) {
          router.push('/customer')
        } else {
          router.push(`/customer/${subModuleId}`)
        }
      } else if (moduleId === 'staff') {
        if (!subModuleId) {
          router.push('/staff/manage')
        } else {
          router.push(`/staff/${subModuleId}`)
        }
      } else if (moduleId === 'bill') {
        if (!subModuleId) {
          router.push('/bill')
        } else {
          router.push(`/bill/${subModuleId}`)
        }
      }
    }

    return {
      currentView,
      user,
      login,
      logout,
      handleMenuSelect
    }
  }
}
</script>

<style>
/* 在这里可以放置全局样式 */

#app {
  width: 100%;
  height: 100%;
}

.main-layout {
  display: flex;
  height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 250px; /* 为侧边栏留出空间 */
}

.top-navigation {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0 1.5rem;
  height: 69px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-brand h1 {
  color: white;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.welcome-text {
  color: white;
  font-weight: 500;
}

.logout-button {
  padding: 0.5rem 1.2rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.logout-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
  margin-top: 69px; /* 为顶部导航栏留出空间 */
}
</style>